<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>挑选计算机系统</title>
</head>
<body>
<form name="computer">
    <p>Choose the components you want included on your computer</p>
    <p>
        <label for="processor">
            Processor:
            <select id="processor" name="processor">
                <option value="Dual-core 2GHz">Dual-core 2GHz</option>
                <option value="Quad-core 2.4GHz">Duad-core 2.4GHz</option>
                <option value="Eight-core 3GHz">Eight-core 3GHz</option>
            </select>
        </label>
    </p>
    <p>
        <label for="memory">
            Memory:
            <select id="memory" name="memory">
                <option value="DDR3 4GB">DDR3 4GB</option>
                <option value="DDR3 8GB">DDR3 8GB</option>
                <option value="DDR3 16GB">DDR3 16GB</option>
            </select>
        </label>
    </p>
    <p>
        <label for="motherboard">
            Motherboard:
            <select id="motherboard" name="motherboard">
                <option value="B65MA">B65MA Chipset</option>
                <option value="B75MA">B75MA Chipset</option>
                <option value="B85MA">B85MA Chipset</option>
            </select>
        </label>
    </p>
    <p>
        <label for="ssd">
            Solid State Disk:
            <select id="ssd" name="ssd">
                <option value="120GB SSD">120GB SSD</option>
                <option value="320GB SSD">320GB SSD</option>
                <option value="520GB SSD">520GB SSD</option>
            </select>
        </label>
    </p>
    <fieldset>
        <legend>Case</legend>
        <p>
            <label for="desktop">
                <input id="desktop" type="radio" name="case" value="desktop" checked="checked">
                Desktop
            </label>
        </p>
        <p>
            <label for="minitower">
                <input id="minitower" type="radio" name="case" value="minitower">
                Mini-tower
            </label>
        </p>
        <p>
            <label for="fulltower">
                <input id="fulltower" type="radio" name="case" value="fulltower">
                Full-tower
            </label>
        </p>
    </fieldset>
    <p><input id="update" type="button" name="update" value="Update"></p>
    <p><label for="order">Order Summary:</label></p>
    <p><textarea id="order" name="order" cols="40" rows="20"></textarea></p>
</form>
<script>
    var productPrice = [];
    productPrice['Dual-core 2GHz'] = 150;
    productPrice['Quad-core 2.4GHz'] = 350;
    productPrice['Eight-core 3GHz'] = 700;
    productPrice['DDR3 4GB'] = 50;
    productPrice['DDR3 8GB'] = 110;
    productPrice['DDR3 16GB'] = 220;
    productPrice['B65MA'] = 75;
    productPrice['B75MA'] = 125;
    productPrice['B85MA'] = 175;
    productPrice['120GB SSD'] = 45;
    productPrice['320GB SSD'] = 85;
    productPrice['520GB SSD'] = 135;
    productPrice['desktop'] = 25;
    productPrice['mintower'] = 30;
    productPrice['fulltower'] = 35;

    function getDropDownInfo(element) {
        var selected = element[element.selectedIndex];
        return {
            text: selected.text,
            price: productPrice[selected.value]
        }
    }

    function getRadioInfo(elements) {
        for (var i = 0; i < elements.length; i++) {
            if (!elements[i].checked) {
                continue;
            }
            var selected = elements[i];
            var label = document.querySelector('[for=' + selected.id + ']');
            return {
                text: label.value,
                price: productPrice[selected.value]
            }
        }
    }

    function updateClick() {
        var total = 0;
        var orderDetails = '';
        var computer = document.computer;

        var selectedProcessor = getDropDownInfo(computer.processor);
        total += selectedProcessor.price;
        orderDetails += 'Processor: ' + selectedProcessor.text;
        orderDetails += ' $' + selectedProcessor.price + '\n';

        var selectedMemory = getDropDownInfo(computer.memory);
        total += selectedMemory.price;
        orderDetails += 'Memory: ' + selectedMemory.text;
        orderDetails += ' $' + selectedMemory.price+ '\n';

        var selectedMotherboard = getDropDownInfo(computer.motherboard);
        total += selectedMotherboard.price;
        orderDetails += 'Motherboard: ' + selectedMotherboard.text;
        orderDetails += ' $' + selectedMotherboard.price + '\n';

        var selectedSsd = getDropDownInfo(computer.ssd);
        total += selectedSsd.price;
        orderDetails += 'Solid-state Drive: ' + selectedSsd.text;
        orderDetails += ' $' + selectedSsd.price + '\n';

        var selectedCase = getRadioInfo(computer.case);
        total += selectedCase.price;
        orderDetails += 'Case: ' + selectedCase.text;
        orderDetails += ' $' + selectedCase.price + '\n';

        orderDetails += '\n\nTotal Order Cost is $' + total;
        computer.order.value = orderDetails;
    }

    document.getElementById('update').addEventListener('click', updateClick);
</script>
</body>
</html>